<template>
  <div class="demo">
    <div class="demo-title">查询模式 - 不确定类目</div>
    <div class="demo-content">
      <AutoComplete
        v-model:value="value"
        :dropdown-match-select-width="252"
        :options="dataSource"
        @select="onSelect"
        @search="handleSearch"
      >
        <template #option="item">
          <div style="display: flex; justify-content: space-between">
            <span>
              Found {{ item.query }} on
              <a
                :href="`https://www.baidu.com/search?q=${item.query}`"
                target="_blank"
                rel="noopener noreferrer"
              >
                {{ item.category }}
              </a>
            </span>
            <span>{{ item.count }} results</span>
          </div>
        </template>
        <Input.Search size="large" placeholder="input here" enter-button></Input.Search>
      </AutoComplete>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Input } from '@sscd/input';
  import AutoComplete from '@sscd/auto-complete';
  interface Option {
    query: string;
    category: string;
    value: string;
    count: number;
  }
  const value = ref('');
  const dataSource = ref<Option[]>([]);
  const onSelect = (val) => {
    console.log('onSelect', val);
  };
  const getRandomInt = (max: number, min = 0) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  const searchResult = (query: string): Option[] => {
    return new Array(getRandomInt(5))
      .join('.')
      .split('.')
      .map((_item, idx) => ({
        query,
        category: `${query}${idx}`,
        value: `${query}${idx}`,
        count: getRandomInt(200, 100),
      }));
  };
  const handleSearch = (val: string) => {
    dataSource.value = val ? searchResult(val) : [];
  };
</script>
